<template>
  <a-dropdown placement="bottomRight" arrow trigger="click">
    <iconfont
      name="#icon-gengduo"
      style="
        color: #1677ff;
        font-size: 18px;
        margin-left: 5px;
        outline: 0;
        cursor: pointer;
      "
    />
    <template #overlay>
      <a-menu forceSubMenuRender>
        <a-menu-item
          @click="openRelation = true"
          v-if="data.dataType === 'file'"
        >
          <div style="position: relative; height: 24px">建立关系</div>
        </a-menu-item>
        <a-menu-item v-if="permission.view && data.dataType === 'file'">
          <!-- <router-link
            :to="
              dbType
                ? `/private/db-management-preview-${dbType}/${data.dataId}/${data.fileId}`
                : `/private/db-management-preview/${data.dataId}/${data.fileId}`
            "
          >
            预览
          </router-link> -->

          <a
            :href="
              dbType
                ? `#/private/db-management-preview-${dbType}/${treeSelectedInfo?.categoryId}/${data.dataId}/${data.fileId}`
                : `#/private/db-management-preview/${treeSelectedInfo?.categoryId}/${data.dataId}/${data.fileId}`
            "
            @click.prevent="onClickLinkPreview(dbType, data)"
          >
            预览
          </a>
        </a-menu-item>
        <a-menu-item>
          <!-- <router-link
            :to="
              dbType
                ? `/private/operation-log-${dbType}/${data.fileId}`
                : `/private/operation-log/${data.fileId}`
            "
          >
            查看操作记录
          </router-link> -->
          <a
            :href="
              dbType
                ? `#/private/operation-log-${dbType}/${data.fileId}`
                : `#/private/operation-log/${data.fileId}`
            "
            @click.prevent="onClickLinkOperation(dbType, data)"
          >
            查看操作记录
          </a>
        </a-menu-item>
        <a-menu-item v-if="data.dataType === 'file' && dbType !== 'personal'">
          <div style="position: relative; height: 24px; min-width: 50px">
            <div
              style="
                position: absolute;
                top: -5px;
                bottom: -5px;
                left: -12px;
                right: -12px;
              "
            >
              <!-- 分享 -->
              <button-share :data="data" />
            </div>
          </div>
        </a-menu-item>
        <a-menu-item>
          <div style="position: relative; height: 24px; min-width: 50px">
            <div
              style="
                position: absolute;
                top: -5px;
                bottom: -5px;
                left: -12px;
                right: -12px;
              "
            >
              <!-- 收藏、取消收藏 -->
              <button-favorite :data="data" @change="favoriteChange" />
            </div>
          </div>
        </a-menu-item>
        <a-menu-item v-if="permission.delete">
          <div style="position: relative; height: 24px; min-width: 50px">
            <div
              style="
                position: absolute;
                top: -5px;
                bottom: -5px;
                left: -12px;
                right: -12px;
              "
            >
              <button-invalid :data="data" />
            </div>
          </div>
        </a-menu-item>
      </a-menu>
    </template>
  </a-dropdown>
  <drawer-relation v-model:open="openRelation" :data="data" />
</template>
<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import iconfont from '@/components/iconfont.vue'
import ButtonInvalid from './table-content-invalid.vue'
import DrawerRelation from './file-relation-drawer.vue'
import {
  usePermission,
  useDbType,
  useDataSourceManager,
  useTreeSelectedInfo,
} from './provide-context.js'
import ButtonFavorite from '../favorites/table-content-favorite-free.vue'
import ButtonShare from '../favorites/table-content-share.vue'
import useKeepAliveStore from '@/stores/keep-alive.js'

/**
 * 全局
 */
let router = useRouter()
let keepAliveStore = useKeepAliveStore()
let dbType = useDbType()
let { update } = useDataSourceManager()
let treeSelectedInfo = useTreeSelectedInfo()
/**
 * 获取参数
 */
let props = defineProps({
  data: { type: Object, required: true },
})
/**
 * 全局数据
 */
let permission = usePermission()
//
let openRelation = ref(false)
// 收藏后刷新
function favoriteChange() {
  update()
}
/**
 * 跳转
 */
function onClickLinkPreview(dbType, data) {
  if (dbType === 'personal') {
    keepAliveStore.setInclude(['db-management/personal'])
  } else if (dbType === 'library') {
    keepAliveStore.setInclude(['db-management/library'])
  } else if (dbType === false) {
    keepAliveStore.setInclude(['db-management/project'])
  }
  router.push(
    dbType
      ? `/private/db-management-preview-${dbType}/${treeSelectedInfo?.value?.categoryId}/${data.dataId}/${data.fileId}`
      : `/private/db-management-preview/${treeSelectedInfo?.value?.categoryId}/${data.dataId}/${data.fileId}`,
  )
}
function onClickLinkOperation(dbType, data) {
  if (dbType === 'personal') {
    keepAliveStore.setInclude(['db-management/personal'])
  } else if (dbType === 'library') {
    keepAliveStore.setInclude(['db-management/library'])
  } else if (dbType === false) {
    keepAliveStore.setInclude(['db-management/project'])
  }
  router.push(
    dbType
      ? `/private/operation-log-${dbType}/${data.fileId}`
      : `/private/operation-log/${data.fileId}`,
  )
}
</script>
<style lang="less" scoped></style>
